<template>
  <div class="equipment">
    <search-form
      ref="header"
      :search-data="formInline"
      :search-form="searchData"
      :search-handle="searchHandle"
    ></search-form>

    <base-table
      :tableData="tableData"
      :tableColumn="tableTitle"
      :Pagination="page"
      :height="tableHeight"
      :tableOption="tableOption"
      @action="handleButton"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-table>

    <!-- 添加或编辑弹框 -->
    <addOrEidtDialog
      ref="heatDialog"
      v-if="dialogObj.show"
      :Visible="dialogObj.show"
      :type="dialogObj.type"
      :dialogRow="dialogObj.dialogRow"
      @close="dialogObj.show = false"
      @refresh="getEquipmentList"
    ></addOrEidtDialog>
  </div>
</template>
<script>
import baseTable from "@/components/Table/index.vue";
import { onMounted, reactive, toRefs } from "vue";
import addOrEidtDialog from "./component/addOrEditDialog.vue";
import { getEquipment, delEquipment } from "@/api/equipment";
import { getSystemList } from "@/api/system";
import { getHeatSource } from "@/api/heatSource";
import { getHeatStation } from "@/api/heatStation";
import searchForm from "@/components/SearchForm/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { parseTime } from "@/utils/index";
import heightMinxin from "@/utils/tableHeight.mixin";
export default {
  name: "equipment",
  mixins: [heightMinxin],
  components: { baseTable, addOrEidtDialog, searchForm },
  setup() {
    const state = reactive({
      formInline: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        equipmentName: "",
        equipmentType: "",
      },
      searchData: [
        {
          type: "Select",
          prop: "heatSourceId",
          placeholder: "选择热源",
          options: [],
          change: (val) => {
            state.formInline.heatStationId = "";
            state.formInline.heatSystemId = "";
            state.searchData[1].options = [];
            state.searchData[2].options = [];
            getHeatStationList(val);
            getSystemData();
          },
        },
        {
          type: "Select",
          prop: "heatStationId",
          placeholder: "选择换热站",
          options: [],
          change: () => {
            state.formInline.heatSystemId = "";
            state.searchData[2].options = [];
            getSystemData();
          },
        },
        {
          type: "Select",
          prop: "heatSystemId",
          placeholder: "选择系统",
          options: [],
          change: () => {},
        },
        {
          type: "Input",
          prop: "equipmentName",
          placeholder: "请输入设备名称搜索",
        },
        {
          type: "Select",
          prop: "equipmentType",
          placeholder: "选择设备类型",
          options: [],
          change: (row) => {},
        },
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "primary",
          handle: () => {
            getEquipmentList();
          },
        },
        {
          label: "添加",
          handle: () => {
            const {
              heatSourceId,
              heatStationId,
              heatSystemId,
            } = state.formInline;
            if (heatSourceId == "") {
              return ElMessage.error("请选择热源");
            }

            if (heatStationId == "" && heatSystemId == "") {
              return ElMessage.error("请选择换热站或系统");
            }
            handleAdd("add", { heatSourceId, heatStationId, heatSystemId });
          },
        },
      ],
      tableData: [],
      tableTitle: [
        { prop: "heatSourceName", label: "热源" },
        { prop: "heatStationName", label: "换热站" },
        { prop: "heatSystemName", label: "系统" },
        { prop: "equipmentName", label: "设备名称" },
        { prop: "equipmentType", label: "设备类型" },
        {
          prop: "alarmOrNot",
          label: "是否报警",
          render(h) {
            if (h.alarmOrNot == 0) {
              return "是";
            } else {
              return "否";
            }
          },
        },

        {
          prop: "alarmType",
          label: "报警类型",
          render(h) {
            if (h.alarmType == 0) {
              return "无";
            } else if (h.alarmType == 1) {
              return "上限报警";
            } else if (h.alarmType == 2) {
              return "上限报警";
            } else if (h.alarmType == 3) {
              return "下限报警";
            } else if (h.alarmType == 4) {
              return "持续下限报警";
            } else if (h.alarmType == 5) {
              return "事件报警";
            } else if (h.alarmType == 6) {
              return "关联报警";
            }
          },
        },
        {
          prop: "alarmDate",
          label: "报警开始时间",
          render(h) {
            if (h.alarmDate) {
              return h.alarmDate, "{y}-{m}-{d} {h}:{i}:{s}";
            } else {
              return "";
            }
          },
        },
        { prop: "remark", label: "备注" },
      ],
      tableOption: {
        label: "操作",
        buttons: [
          { name: "编辑", methods: "edit" },
          { name: "删除", methods: "delete", style: { color: "red" } },
        ],
      },
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      dialogObj: {
        show: false,
        type: "add",
        dialogRow: {},
      },
    });

    onMounted(() => {
      // 获取热源
      getHeatSourceList();
      getEquipmentList();
    });
    /**热源 */
    const getHeatSourceList = async () => {
      const { data: res } = await getHeatSource();
      if (res.success) {
        const list = res.data.map((item) => {
          return { label: item.name, value: item.id };
        });
        state.searchData[0].options = list;
      }
    };

    /**
     * 根据热源选择换热站
     */
    const getHeatStationList = async (id) => {
      const { data: resp } = await getHeatStation({ heatSourceId: id });
      if (resp.success) {
        const list = resp.data.map((item) => {
          return { label: item.name, value: item.id };
        });
        state.searchData[1].options = list;
      }
    };

    // 根据热源或换热站选择系统
    const getSystemData = () => {
      const { heatStationId, heatSourceId } = state.formInline;
      getSystemList({ heatSourceId, heatStationId }).then((res) => {
        if (res.data.success) {
          const list = res.data.data.map((item) => {
            return { label: item.name, value: item.id };
          });
          state.searchData[2].options = list;
        }
      });
    };
    const getEquipmentList = async () => {
      const { pageNo, pageSize } = state.page;
      let params = Object.assign(state.formInline, { pageNo, pageSize });
      const { data: res } = await getEquipment(params);
      if (res.success) {
        state.tableData = res.data.res;
        state.page.total = res.data.total;
      }
    };

    const handleCurrentChange = (val) => {
      state.page.pageNo = val;
      getEquipmentList();
    };
    const handleSizeChange = (val) => {
      state.page.pageNo = 1;
      state.page.pageSize = val;
      getEquipmentList();
    };

    const handleAdd = (type, row) => {
      state.dialogObj.show = true;
      state.dialogObj.type = type;
      state.dialogObj.dialogRow = row;
    };

    const handleButton = ({ row, methods, index }) => {
      if (methods == "edit") {
        handleAdd(methods, row);
      } else {
        handleDelete(row, index);
      }
    };

    const handleDelete = (row, index) => {
      ElMessageBox.confirm(`确定删除该设备名称-${row.equipmentName}?`, "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          delEquipment({ id: row.id }).then((res) => {
            if (res.data.success) {
              state.tableData.splice(index, 1);
              ElMessage.success(res.data.msg);
            }
          });
        })
        .catch(() => {});
    };
    return {
      ...toRefs(state),
      handleAdd,
      handleButton,
      getEquipmentList,
      handleCurrentChange,
      handleSizeChange,
    };
  },
};
</script>
<style lang="less"></style>
